<?php $token = session('token');?>

@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox">
		<div class="ibox-title">
			<h5>页面图片管理</h5>
		</div>
		<div class="ibox-content">
			<div class="m-b">
    		<a href="javascript:;" onclick="RenderPageList()" class="btn btn-default m-l-xs"><i class="fa fa-refresh"></i> 刷新</a>
				@if($token['isHidden'])
				<a href="{{url('admin/pageadver/add')}}" class="btn btn-warning m-l"><i class="fa fa-plus"></i> 添加页面广告位</a>
				@endif
			</div>
			<table id="tblDataList" class="table table-striped table-hover">
				<thead>
					<tr>
						<th>#</th>
						<th>标题</th>
						<th>尺寸</th>
						<th><a data-toggle="tooltip" data-placement="top" title="图片">图片</a></th>
						<th><a data-toggle="tooltip" data-placement="top" title="审核">审</a></th>
						<th width="65"></th>
						@if($token['isHidden'])
						<th width="65"></th>
						@endif
					</tr>
				</thead>
				<tbody></tbody>
			</table>
			<div id="pagination" class="text-center"></div>
		</div>
	</div>
</div>

<script id="tplDataList" type="text/html">
	<%each rows as row i%>
	<tr data-id="<%row.id%>">
		<td><%i+1%></td>
		<td><%row.title%></td>
		<td><%row.width%> × <%row.height%></td>
		<td>
			<a href="javascript:;" class="m-r-xs js-pic" data-src="<%row.pic%>" data-width="<%row.width%>" data-height="<%row.height%>">
				<%if row.pic%>
				<i class="fa fa-file-image-o fa-lg"></i>
				<%else%>
				<i class="fa fa-cloud-upload fa-lg"></i>
				<%/if%>
			</a>
		</td>
		<td>
			<a href="javascript:;" class="js-status">
				<%if row.status%>
				<i class="fa fa-check text-navy"></i>
				<%else%>
				<i class="fa fa-ban text-danger"></i>
				<%/if%>
			</a>
		</td>
		<td>
			<a href="javascript:;" class="m-r-xs js-edit">
				<i class="fa fa-pencil-square fa-lg"></i>编辑
			</a>
		</td>
		@if($token['isHidden'])
		<td>
			<a href="javascript:;" class="m-r-xs js-del">
				<i class="fa fa-times-circle fa-lg"></i>删除
			</a>
		</td>
		@endif
	</tr>
	<%/each%>
</script>

<div id="myUploadPicModal" class="modal fade" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"></div>
<script id="tplUploadPic" type="text/html">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal" type="button">&times;</button>
				<h4 class="modal-title" id="avatar-modal-label">图片上传</h4>
			</div>
			<div class="row modal-body">
				<div class="col-lg-6">
					<div id="ImageUploader"></div>
				</div>
				<div class="col-lg-6">
					<div id="pictureViewer">
						<p>预览：</p>
						<%if src%>
	  				<img src="<%src%>" class="img-thumbnail" />
	  				<%else%>
	  				<img src="/assets/images/blank.gif" class="img-thumbnail" />
	  				<%/if%>
					</div>
				</div>
			</div>
  	</div>
  </div>
</script>
@endsection

@section('pagescript')
<script src="{{asset('assets/swfobject/swfobject.js')}}"></script>
<script>
	$("#side-menu li[rel='pageadver']").addClass("active")
	  .parents("ul").addClass("in").parents("li").addClass("active");

	var artDialog, filter = {"kw":"","page":1,"limit":10};
	var RenderPageList = function(){
		$.get("{{url('admin/pageadver/page-rows')}}", filter, function(data){
			$("#tblDataList tbody").html(template("tplDataList", data));
			$("#pagination").html(page(data.page_count, data.total_rows, data.page));
		}).fail(failure);
	};

	$("#pagination").delegate("li a", "click", function(){
		filter.page = $(this).attr("rel");
		RenderPageList();
	});

	$("#tblDataList").delegate(".js-status", "click", function(){
		var obj = $(this).find('i'),
			id = $(this).parents('tr').eq(0).data('id'),
			status = obj.hasClass('fa-check') ? 0 : 1;
		obj.attr('class', 'fa fa-refresh animated rotateIn');
		$.post("{{url('admin/pageadver/update')}}", {'id':id,'status':status}, function(){
			if(status){
				obj.attr("class", 'fa fa-check text-navy');
			}else{
				obj.attr("class", 'fa fa-ban text-danger');
			}
		}).fail(failure);
	});

	var flash_vars = {"id":0, "width":100, "height":100};
	var uploadImageSuccess = function(result){
		var data = $.parseJSON(result);
		$("#pictureViewer img").eq(0).attr("src", data.pic);
		var tr = $("#tblDataList").find("tr[data-id='"+ data.id +"']").eq(0),
  			ta = tr.find(".js-pic").eq(0);
  	ta.data("src", data.pic);
  	ta.find("i").removeClass("fa-cloud-upload").addClass("fa-file-image-o");
	};
	var uploadImageCancel = function(){
		$("#myUploadPicModal").modal('hide');
	};
	var loadImgUploaderSwf = function(){
    var xiSwfUrlStr = "{{asset('assets/swfobject/expressInstall.swf')}}";
    var flashvars = {
      "max_size": "2048",//图片文件大小，单位：KB
      "width": flash_vars.width, //裁剪宽度
      "height": flash_vars.height, //裁剪高度
      "uploadUrl": "{{url('admin/pageadver/upload-pic')}}?id="+flash_vars.id, //上传地址
      "backcall": "uploadImageSuccess", //成功回调JS函数
      "cancelbackcall": "uploadImageCancel",//取消时js回调函数
    };
    var params = {
      menu: "false",
      scale: "noScale",
      allowFullscreen: "true",
      allowScriptAccess: "always",
      wmode:"transparent",
      bgcolor: "#FFFFFF"
    };
    var attributes = {"id":"ImageUploader"};
    swfobject.embedSWF("{{asset('assets/iemaker/ImageUploader.swf')}}", "ImageUploader", "350", "380", "10.1.0", xiSwfUrlStr, flashvars, params, attributes);
    swfobject.createCSS("#ImageUploader", "display:block;text-align:left;");
  };
	$('#myUploadPicModal').on('shown.bs.modal', function (e) {
	  loadImgUploaderSwf();
	});

  $("#tblDataList").delegate(".js-edit", "click", function(){
  	var id = $(this).parents('tr').eq(0).data("id");
  	window.location.href = "{{url('admin/pageadver/edit')}}?id=" + id;
  	return false;
	});

  $("#tblDataList").delegate(".js-pic", "click", function(){
		flash_vars = {
			'id': $(this).parents('tr').eq(0).data("id"),
			'src': $(this).data("src"),
			'width': $(this).data("width"),
			'height': $(this).data("height")
		};
		$("#myUploadPicModal").html(template("tplUploadPic", flash_vars)).modal('show');
	});

  $("#tblDataList").delegate(".js-del", "click", function(e){
  	var id = $(this).parents('tr').eq(0).data("id");
  	dialog({
			content: '<i class="fa fa-info-circle"></i> 确定要删除此广告位吗？',
			ok: function(){
		  	$.post("{{url('admin/pageadver/delete')}}", {"id":id}, function(){
		  		$(e.target).parents("tr").eq(0).remove();
		  	}).fail(failure);
		  },
			cancel: true
		}).showModal();
	});

	$(function(){
		$('[data-toggle="tooltip"]').tooltip();
		RenderPageList();
	});
</script>
@endsection